<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入订单号" size="small" class="input-with-select" v-model="queryInfo.id" clearable
                    @clear="getMemberChargeOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入手机号" size="small" class="input-with-select" v-model="queryInfo.mobile" clearable
                    @clear="getMemberChargeOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.payStatus" placeholder="支付状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="未支付" value="N"></el-option>
            <el-option label="已支付" value="S"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.orderStatus" placeholder="订单状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="等待支付" value="N"></el-option>
            <el-option label="取消" value="C"></el-option>
            <el-option label="充值中" value="T"></el-option>
            <el-option label="充值成功" value="S"></el-option>
            <el-option label="已退款" value="R"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getMemberChargeOrderList">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="orderList" border stripe>
        <el-table-column label="订单号" prop="id" width="66"></el-table-column>
        <el-table-column label="分类" prop="categoryName" width="110"></el-table-column>
        <el-table-column label="子分类" prop="subCategoryName" width="120"></el-table-column>
        <el-table-column label="规格" prop="tpName"></el-table-column>
        <el-table-column label="Sku" prop="skuName"></el-table-column>
        <el-table-column label="充值账号" prop="chargeAccount" width="110"></el-table-column>
        <el-table-column label="价格" prop="amount" width="60"></el-table-column>
        <el-table-column label="支付" prop="payStatusText" width="60"></el-table-column>
        <el-table-column label="订单状态" prop="orderStatusText" width="72">
          <template slot-scope="scope">
            <span type="primary" v-if="scope.row.orderStatus=='T'" style="color:red"> {{
                scope.row.orderStatusText
              }}</span>
            <span type="primary" v-if="scope.row.orderStatus!='T'">{{ scope.row.orderStatusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" prop="addTimeText" width="124"></el-table-column>
        <el-table-column label="接单人" width="68">
          <template slot-scope="scope">
            <span v-if="scope.row.processUserName!=null" style="color: #f368e0">{{ scope.row.processUserName }}</span>
            <el-button v-if="scope.row.payStatus=='S' && scope.row.processUserName==null" type="primary" plain size="small" @click="jiedan(scope.row.id)">接单</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="78">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="getMemberChargeOrder(scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
        <el-table-column label="用户手机号" prop="mobile" width="100"></el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="400">
      <el-card>
        <el-descriptions :title="order_title" class="margin-top" :column="4" border>
          <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ order.mobile }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{ order.payStatusText }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ order.orderStatusText }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions title="商品信息" class="margin-top" :column="2" border>
          <el-descriptions-item label="分类">{{ order.categoryName }}</el-descriptions-item>
          <el-descriptions-item label="子分类">{{ order.subCategoryName }}</el-descriptions-item>
          <el-descriptions-item label="规格"><el-tag>{{ order.tpName }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="Sku">{{ order.skuName }}</el-descriptions-item>
          <el-descriptions-item label="售格">{{ order.orderAmount }}</el-descriptions-item>
          <el-descriptions-item label="官方价">{{ order.officialPrice }}</el-descriptions-item>
          <el-descriptions-item label="充值账号">{{ order.chargeAccount }}&nbsp;&nbsp;&nbsp;&nbsp;{{ order.chargeAccountAppend }}</el-descriptions-item>
          <el-descriptions-item label="是否需要验证码">
              <el-tag type="info" v-if="order.needSmsCode=='N'">否</el-tag>
              <el-tag type="danger" v-if="order.needSmsCode=='Y'">是</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-form ref="form" :model="order" label-width="100px" v-if="order.needSmsCode=='Y'">
        <el-card>
          <el-form-item label="短信验证码">
            <el-input type="textarea" style="width: 70%;margin-left: 20px;"  v-model="order.smsCode"></el-input>
            <el-button type="success" size="small" style="margin-left: 10px;" @click="setMemberChargeOrderSmsCode()">保存验证码</el-button>
          </el-form-item>
        </el-card>
      </el-form>

      <el-form ref="form" :model="order" label-width="80px" v-if="order.orderStatus=='T' && order.needSmsCode=='Y'">
        <el-card style="height: 66px;text-align: right;">
          <el-form-item>
            <el-button type="primary" size="small" @click="setSmsNotify(order.id)">通知用户上传短信验证码</el-button>
          </el-form-item>
        </el-card>
      </el-form>

      <el-form ref="form" :model="order" label-width="80px" v-if="order.orderStatus=='T'">
        <el-card style="height: 66px;text-align: right;">
          <el-form-item>
            <el-button type="danger" size="small" @click="setChargeSuccess(order.id)">充值成功</el-button>
          </el-form-item>
        </el-card>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import Api from "@/api/MemberCharge.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        dialogImageUrl: '',
        disabled: false,
        queryInfo: {
          id: "",
          mobile: "",
          pageNo: 1,
          orderStatus: 'T',
          payStatus: 'S',
          pageSize: 20, // 页大小
        },
        quantity: 0,
        order: {
        },
        orderList: [],
        total: 0,
        order_title:'订单详情',
        muted:true
      };
    },
    created() {
        this.getMemberChargeOrderList();
    },
    methods: {
      getMemberChargeOrderList() {
        Api.getMemberChargeOrderList(this.queryInfo).then((res) => {
          if (res.success) {
            this.orderList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getMemberChargeOrder(id) {
        this.drawer = true;
        Api.getMemberChargeOrder({'id': id}).then((res) => {
          if (res.success) {
            this.order = res.data;
            if(this.order.processUserName!=null){
              this.order_title = '订单详情（接单人：' + this.order.processUserName + ')';
            }else{
              this.order_title = '订单详情';
            }
          } else {
            return this.$message.error("获取订单失败");
          }
        });
      },
      jiedan(id) {
        Api.jiedan({'id': id}).then((res) => {
          if (res.success) {
            this.$message.success("接单成功，请尽快处理");
            this.getMemberChargeOrderList();
          } else {
            return this.$message.error("接单失败：" + res.msg);
          }
        });
      },
      setMemberChargeOrderSmsCode() {
        Api.setMemberChargeOrderSmsCode(this.order).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      setChargeSuccess(id) {
        this.$confirm('确认充值成功了吗？')
            .then(_ => {
              Api.setMemberChargeOrderFinish({'id': id}).then((res) => {
                if (res.success) {
                  this.$message.success("保存成功");
                  this.getMemberChargeOrderList();
                } else {
                  return this.$message.error("保存失败：" + res.msg);
                }
              });
            }).catch(_ => {});
      },
      setSmsNotify(id) {
        this.$confirm('确认通知用户吗？')
            .then(_ => {
              Api.setMemberChargeOrderSmsNotify({'id': id}).then((res) => {
                if (res.success) {
                  this.$message.success("确认成功");
                  this.getMemberChargeOrderList();
                } else {
                  return this.$message.error("确认失败：" + res.msg);
                }
              });
            }).catch(_ => {});
      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getMemberChargeOrderList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getMemberChargeOrderList();
      }
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
